<template>
	<view>
		<view class="search_row">
            <input v-model="inpValue" value="inpValue" placeholder="请输入你要搜索的商品" @input="handleInput">
            <button @click="handleCancel" :hidden="!isFocus">取消</button>
        </view>
        <view class="search_content">
            <navigator 
             v-for="item in goods"
            :key="item.goods_id"
            :url="`/pages/goods_detail/main?goods_id={{item.goods_id}}`" 
            class="search_item"
           
            >
            {{item.goods_name}}
            </navigator>

        </view>

	</view>
</template>

<script>
	export default {
        data(){
            return{
                goods:[],
                isFocus:false,
                inpValue:"",
                TimeId:-1,
            }
        },
        methods:{
            handleInput(e){
                const {value} = e.detail;
                if(!value.trim()){
                    this.goods=[],
                    this.isFocus=false
                    
                    return;
                }
                this.isFocus=true
                clearTimeout(this.TimeId);
                this.TimeId=setTimeout(()=>{
                    this.qsearch(value);
                },1000)
            },
            //发送请求
            qsearch(query){
                this.request({
                    url:"https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch",
                    data:{query}
                })
                .then(res=>{
                    this.goods=res;
                })

            },

            handleCancel(){
                
                this.isFocus=false;
                this.goods=[];
                this.inpValue="";
                
            },
            
        }
	}
</script>

<style lang="scss">
	page{
        background-color: #dedede;
        padding: 20rpx;
    }
    .search_row{
        height: 60rpx;
        display: flex;
        input{
            padding-left: 30rpx;
            background-color: #fff;
            flex: 1;
            height: 100%;

        }
        button{
            width: 110rpx;
            height: 100%;
            padding: 0;
            margin: 0 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 26rpx;
        }
    }
    .search_content{
        margin-top: 20rpx;
        .search_item{
            background-color: #fff;
            font-size: 26rpx;
            padding: 15rpx 10rpx;
            border-bottom: 1rpx solid #ccc;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
</style>